Controlling element display

You can control how (and if) elements display by using the display property. By using the display property you can set the following values:

inline | block | list-item | inline-block | table
inline-table | table-row-group |  table-header-group
table-footer-group |  table-row | table-column-group
table-column | table-cell | table-caption | none | inherit

Examples

Display this list
as inline elements,
this will cause them
to display on the same line

Display these images as block-level elements:

Inline block display

This allows you to display block-level elements as inline elements, while still giving you full control over box model properties. Try it with the heading 4s below.

Controlling element display

Examples

Display these images as block-level elements:

Inline block display

first heading

second heading

third heading

You can tell elements to not display at all, as well.